<template>
   <div class="sdy-home-banner">
    <van-swipe 
    class="swiper-container" 
    :autoplay="3000" 
    :duration="1000"
    indicator-color="red">
        <van-swipe-item
        v-for="item in bannerList"
        :key="item.bannerid">
        <van-image :src="item.img"></van-image>
    </van-swipe-item>
    </van-swipe>
   </div>
</template>
<script setup lang="ts">
// 导入对应的api请求功能函数
import { bannerListApi } from '@/api/banner'
// 导入banner的类型限制
import type { MyBannerItem} from '@/config/interface'
import { ref,onMounted } from 'vue'

// 提前准备数组（请求回来以后进行替换（ref）），用该数组渲染页面
const bannerList = ref<MyBannerItem[]>([])

// 挂载完毕的钩子
onMounted(async () => { 
    // 获取轮播图列表
    const res = await bannerListApi()
    // console.log(res);
    bannerList.value = res.data
    })
</script>
<style lang="scss">
// 引入全局颜色变量
@import '@/styles/variable.scss';
.sdy-home-banner{
    height: 180px;
    // border-bottom: 1px solid black;
    position: relative;
    box-sizing: border-box;
    padding: 15px;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: -50px;
        width: 100%;
        height: 100%; 
        background-color: $globalColor;
        border-radius: 0 0 200px 200px / 0 0 40px 40px;
        z-index: -1;
    }
    > .swiper-container { 
        width: 100%;
        height: 100%;
        background-color: pink;
        border-radius: 10px;
        overflow: hidden;
    }

}
</style>